<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type { ResourceDetail } from '../models/Resource';
import type { CommentItem, CommentLoadCondition } from '../models/Comment';
import { handelLoadMoreComments, handelSubmitComment, handleLikeToBack } from '../services/CommentService';
import { handelLoadResourceDetail } from '../services/GetResourceService';



const emit = defineEmits(['goBack'])
const props = defineProps<{ resourceId: number }>()


const resource = ref<ResourceDetail>({
    id: props.resourceId,
    title: '',
    name: '',
    size: 0,
    uploadTime: '',
    description: '',
    rating: 0,
    downloads: 0,
    type: ''
})

const commentBox = ref<HTMLElement | null>(null)
const comments = ref<CommentItem[]>([])
const page = ref(1)
const loading = ref(false)
const noMore = ref(false)
const newComment = ref('')

function handleScroll() {
    const el = commentBox.value
    if (!el) return

    const scrollBottom = el.scrollTop + el.clientHeight
    if (scrollBottom >= el.scrollHeight - 10) {
        page.value++
        const condition: CommentLoadCondition = { resourceId: resource.value.id, pageIndex: page.value }
        handelLoadMoreComments(comments, condition, page, loading, noMore)
    }
}

function handleLike(comment: CommentItem) {
    comment.praise = (comment.praise || 0) + 1
    handleLikeToBack(resource.value.id, comment)
}

function submitComment() {
    if (newComment.value.trim() === '') return

    comments.value.unshift({
        userName: '我',
        content: newComment.value.trim(),
        time: new Date().toLocaleString(),
        praise: 0
    })

    handelSubmitComment(resource.value.id, newComment.value)
    newComment.value = ''
}


function goBack() {
  emit('goBack', '从详情返回列表')
}

onMounted(() => {
    const condition: CommentLoadCondition = { resourceId: resource.value.id, pageIndex: 1 }
    handelLoadMoreComments(comments, condition, page, loading, noMore)
    handelLoadResourceDetail(resource)
})
</script>

<template>
    <div class="background">
        <div class="back-button" @click="goBack">
            <img src="../assets/images/ic/arrow_back.png" alt="返回" />
        </div>
        <div class="title-flex">
            <h1>基本信息</h1>
        </div>

        <div class="resource-detail1">
            <p class="item"><strong>标题：</strong>{{ resource.title }}</p>
            <p class="item"><strong>资源名：</strong>{{ resource.name }}</p>
            <p class="item"><strong>类型：</strong>{{ resource.type }}</p>
            <p class="item"><strong>大小：</strong>{{ resource.size }}</p>
            <p class="item"><strong>上传时间：</strong>{{ resource.uploadTime }}</p>
            <p class="item"><strong>评分：</strong>{{ resource.rating }}</p>
            <p class="item"><strong>下载次数：</strong>{{ resource.downloads }}</p>
        </div>
        <div class="title-flex">
            <h1>介绍</h1>
        </div>

        <div class="resource-detail2">
            <p class="item">{{ resource.description }}</p>
        </div>

        <!-- 操作按钮区域 -->
        <div class="actions">
            <button class="action-button">
                <img src="../assets/images/ic/star.png" alt="下载" class="icon" /> 收藏
            </button>
            <button class="action-button">
                <img src="../assets/images/ic/download.png" alt="下载" class="icon" /> 下载
            </button>
            <button class="action-button">
                <img src="../assets/images/ic/leaderboard.png" alt="下载" class="icon" /> 打分
            </button>
        </div>
        <div class="title-flex">
            <h1>评论</h1>
        </div>

        <!-- 评论列表容器 -->
        <div class="comment-container" @scroll.passive="handleScroll" ref="commentBox">
            <div class="comment-item" v-for="(comment, index) in comments" :key="index">
                <div class="comment-top">
                    <span class="comment-time">{{ comment.time }}</span>
                </div>
                <div class="comment-main">
                    <div class="comment-user-text">
                        <span class="comment-user">{{ comment.userName }}</span>
                        <span class="comment-text">{{ comment.content }}</span>
                    </div>
                    <div class="comment-like">
                        <img src="../assets/images/ic/praise.png" alt="点赞" class="like-icon"
                            @click="handleLike(comment)" />
                        <span class="like-count">{{ comment.praise }}</span>
                    </div>
                </div>
            </div>
            <div v-if="loading" class="loading">加载中...</div>
            <div v-if="noMore" class="end">没有更多评论了</div>
        </div>

        <!-- 评论输入框 -->
        <div class="comment-input">
            <input v-model="newComment" placeholder="说点什么..." />
            <button @click="submitComment()">发送</button>
        </div>
    </div>
</template>

<style scoped>
/* 返回按键 */
.back-button {
    margin-top: 40px;
    position: fixed;
    top: 20px;
    left: 20px;
    width: 48px;
    height: 48px;
    cursor: pointer;
    z-index: 999;
}

.back-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* 介绍字体 */
.title-flex h1 {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
}

/* 细节 */
.resource-detail1 {
    max-width: 40%;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px 30px;
    border-radius: 12px;
    color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.resource-detail2 {
    max-width: 60%;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px 30px;
    border-radius: 12px;
    color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.item {
    margin: 10px 0;
    font-size: 18px;
}

/* 按键 */
.actions {
    margin: 30px auto;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.action-button {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.action-button:hover {
    background-color: #f0f0f0;
}

.icon {
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
}
/* 评论 */

.comment-container {
    max-height: 400px;
    min-height: 100px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 auto 20px;
    padding: 20px;
    border-radius: 8px;
    width: 60%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.comment-item {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    font-size: 16px;
}

.comment-top {
    margin-bottom: 4px;
    color: #888;
    font-size: 12px;
}

.comment-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-user-text {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.comment-user {
    font-weight: bold;
    color: #333;
}

.comment-text {
    color: #555;
    max-width: 70vw;
    word-break: break-word;
}

.comment-like {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}

.like-icon {
    width: 18px;
    height: 18px;
}

.comment-input {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.comment-input input {
    width: 60%;
    padding: 8px 12px;
    border: 1px solid #aaa;
    border-radius: 6px;
}

.comment-input button {
    padding: 8px 16px;
    background-color: #4caf50;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
}

.loading,
.end {
    text-align: center;
    margin-top: 10px;
    color: #888;
}

</style>